<template>
    <div class="num_">
        <span class="_txt" :class="isBold()" :style="{ color: color }"> {{ Text() }} </span>
    </div>
</template>

<script lang="ts" setup>
import Copy from "@/components/copy/index.vue";
const prop = defineProps({
    bold: {
        type: Boolean,
        default: false
    },
    text: {
        type: String,
        default: ""
    },
    color: {
        type: String,
        default: "white"
    },
    max: {
        type: Number,
        default: 20
    }
});
function Text() {
    let text = prop.text;
    if (text.length > prop.max) {
        text = text.slice(0, prop.max).concat("...");
    }
    return text;
}

function isBold() {
    return prop.bold ? "bold" : "";
}
</script>

<style lang="less">
.num_ {
    display: inline-flex;
    align-items: center;
    ._txt {
        text-wrap: nowrap;
    }
}

.bold {
    font-weight: 700;
}
</style>
